<template>
  <el-card class="questions">
    <DkcSubject @onSubmit="onSubmit"></DkcSubject>
    <el-alert
      :title="`共${counts}条记录`"
      type="info"
      show-icon
      :closable="false"
    >
    </el-alert>
    <el-table
      :header-cell-style="{ background: '#FAFAFA' }"
      :data="questionData"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="number" label="试题编号" width="180">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="80">
      </el-table-column>
      <el-table-column prop="catalog" label="目录"> </el-table-column>
      <el-table-column prop="questionType" label="题型" :formatter="typeFormat">
      </el-table-column>
      <el-table-column prop="question" label="题干"> </el-table-column>
      <el-table-column prop="addDate" label="录入时间" :formatter="dateFormat">
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        :formatter="difficultyFormat"
      >
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"

      >
      </el-table-column>

      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <!-- 预览 -->
           <el-button
            plain
            type="primary"
            icon="el-icon-view"
            circle
            @click="preview(scope.row.id)"
          ></el-button>
          <!-- 编辑按钮 -->
          <el-button
            plain
            type="success"
            icon="el-icon-edit"
            circle
            @click="edit(scope.row)"
          ></el-button>
           <!-- 删除按钮 -->
          <el-button
            plain
            type="danger"
            icon="el-icon-delete"
            circle
            @click="del(scope.row.id)"
          ></el-button>
          <!-- 精选按钮 -->

            <el-button
              @click="choiceAdd(scope.row)"
              plain
              type="warning"
              icon="el-icon-star-off"
              circle
            ></el-button>

        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next,sizes,jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10, 20, 30, 50]"
        :total="counts"
      >
      </el-pagination>
      <DkcDetail :outerVisible.sync="outerVisible" :questionItem="questionItem"></DkcDetail>
    </div>
  </el-card>
</template>

<script>
import DkcSubject from '@/module-hmmm/views/components/DkcSubject.vue'
import DkcDetail from '@/module-hmmm/views/components/DkcDetail.vue'
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
export default {
  components: {
    DkcSubject,
    DkcDetail
  },
  data () {
    return {
      params: {
        page: 1,
        pagesize: 10
      },
      questionData: [],
      counts: null,
      outerVisible: false,
      questionItem: {}
    }
  },
  created () {
    this.list()
  },
  methods: {
    onSubmit (params) {
      this.params = params
      this.list()
    },
    async list () {
      const { data } = await list(this.params)

      this.questionData = data.items
      this.counts = data.counts
    },
    typeFormat (row) {
      if (row.questionType === '1') {
        return '单选'
      } else if (row.questionType === '2') {
        return '多选'
      } else if (row.questionType === '3') {
        return '简答'
      }
    },
    difficultyFormat (row) {
      if (row.difficulty === '1') {
        return '简单'
      } else if (row.difficulty === '2') {
        return '一般'
      } else if (row.difficulty === '3') {
        return '困难'
      }
    },
    dateFormat (row) {
      return this.$dayjs(row.addDate).format('YYYY-MM-DD')
    },

    handleSizeChange (val) {
      this.params.pagesize = val
      this.list()
    },
    handleCurrentChange (current) {
      this.params.page = current
      this.list()
    },
    async preview (id) {
      this.outerVisible = true
      const { data } = await detail(id)

      this.questionItem = data
    },

    // 去修改试题的页面
    edit (row) {
      this.$router.push({
        path: 'new',
        query: {
          id: row.id
        }
      })
    },
    async del (id) {
      await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.list()
    },
    // 加入精选
    async choiceAdd (row) {
      const result = await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).catch(err => err)
      // 如果确认就加入精选 否则什么都不做
      if (result === 'confirm') {
        const data = await choiceAdd({
          id: row.id,
          choiceState: 1
        })
        if (data.status === 200) {
          this.$message.success('加入精选成功')
        }
        // 更新题库列表
        this.list()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.questions {
  margin: 20px 20px;
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
